<template>
  <div>
    <sticky class-name="sub-navbar">
      <el-button style="margin-left: 10px;" type="primary" @click="approveProcess">审批进度</el-button>
      <el-button style="margin-left: 10px;" type="primary" @click="approveComment">审批意见</el-button>
      <el-button style="margin-left: 10px;" type="primary" @click="startProcess">提请审批</el-button>
      <el-button style="margin-left: 10px;" type="primary" @click="withdraw">撤回</el-button>
    </sticky>
    <el-dialog v-el-drag-dialog :visible.sync="processVisible" title="审批进度" @dragDialog="handleDrag">
      <el-table :data="processList" style="width: 100%;padding-top: 15px;">
        <el-table-column label="审批节点" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.taskName}}
          </template>
        </el-table-column>
        <el-table-column label="审批意见" width="195" align="center">
          <template slot-scope="scope">
            {{ scope.row.comment }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status">成功</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog v-el-drag-dialog :visible.sync="commentVisible" title="审批意见" @dragDialog="handleDrag">
      <el-table :data="processList" style="width: 100%;padding-top: 15px;">
        <el-table-column label="审批节点" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.taskName}}
          </template>
        </el-table-column>
        <el-table-column label="审批意见" width="195" align="center">
          <template slot-scope="scope">
            {{ scope.row.comment }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status">成功</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import {startProcess} from "../../api/process"
  import elDragDialog from '@/directive/el-dragDialog'
  import Sticky from '@/components/Sticky'


  export default {
    name: "ApproveBar",
    directives: { elDragDialog },
    components: {Sticky},
    props: {
      approveData: {
        type: Object,
        default: function () {
          return {
            processKey: '',
            processInstanceId: '',
            taskKey: ''
          }
        }
      }
    },
    data() {
      return {
        processVisible:false,
        commentVisible:false,
        processList:[
          {
            taskName:'ss',
            comment:'同意',
            status:'success'
          }
        ],
        commentList:[]
      }
    },
    methods: {
      approveProcess() {
          this.processVisible = true
      },
      approveComment() {
        this.commentVisible = true
      },
      startProcess(data) {
        startProcess(data);
      },
      withdraw() {

      },
      handleDrag(){

      }
    }
  }
</script>

<style scoped>

</style>
